<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <!-- <el-card shadow="always" class="card" id="chartPie"></el-card> -->
  <el-card shadow="always" class="card" id="main"></el-card>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Sstatistics',
  date() {
    return {
      charts: '',
      numm: [],
    };
  },
  methods: {
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById('chartPie'));
      this.chartPie.setOption({
        title: {
          text: '论坛统计',
          subtext: '论坛数据',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'righ',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: '论坛数据',
            type: 'pie',
            radius: [40, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            // 数据源
            data: [
              { value: 60, name: '未来祝福' },
              { value: 38, name: '当前形势' },
              { value: 32, name: '期盼寄语' },
              { value: 30, name: '生活状态' },
              { value: 28, name: '疑问解答' },
              { value: 26, name: '政策解读' },
              { value: 22, name: '生活状况' },
              { value: 18, name: '美好明天' },
            ],
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        backgroundColor: '#2c343c',
        title: {
          text: '论坛统计',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc',
          },
        },
        tooltip: {
          trigger: 'item',
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 335, name: '期盼' },
              { value: 310, name: '政策' },
              { value: 274, name: '生活' },
              { value: 235, name: '明天' },
              { value: 400, name: '未来' },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.3)',
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      });
    },
  },

  mounted: function () {
    //如果数据同时调用时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
    setTimeout(() => {
      this.drawPie('main');
      this.drawCharts();
    }, 500);
  },
};
</script>

<style scoped>
.card {
  height: 85vh;
  width: 94%;
  margin: auto;
  margin-top: 30px;
}
</style>
